import React from 'react';
import {
  Flex,
  InputItem,
  Icon,
} from 'antd-mobile';

class SearchInput extends React.Component {
  render() {
    const { type, placeholder, onChange, value, onExtraClick, onBlur, extraText } = this.props;
    return (
      <Flex style={{ backgroundColor: '#ffffff', flex: 1, margin: '0.5%', borderRadius: '10px', border: '1px solid #dcdcdc', caretColor: '#3a98ef' }}>
        <Flex.Item style={{ padding: '2%', flex: 1 }}>
          <Icon type="search" size="md" style={{ color: '#3a98ef' }} />
          {/* <div style={{ backgroundImage: 'url(https://zos.alipayobjects.com/rmsportal/DfkJHaJGgMghpXdqNaKF.png)', backgroundSize: 'cover', height: '24px', width: '24px' }} /> */}
        </Flex.Item>
        <Flex.Item style={{ flex: 32, padding: 'none' }}>
          <InputItem
            type={type}
            placeholder={placeholder}
            onChange={onChange}
            value={value}
            onExtraClick={onExtraClick}
            clear
            onBlur={onBlur}
                // focus="true"
            extra={extraText}
          />
        </Flex.Item>
      </Flex>
    );
  }
}

export default SearchInput;
